<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS 样式</title>
	<!-- 外部样式 -->
	<link rel="stylesheet" type="text/css" href="mystyle.css">

	<!-- 内部样式 -->
	<style type="text/css">
		table{
			border: 1px solid #aaa;
			border-collapse: collapse;
			width: 100%;
		}
		th{
			background-color: #3f3f3f;
			color: white;
			text-align: left;
			font-weight: bold;
		}
		td{
			border: 1px solid #aaa;
			color: black;
		}
		ins{
			color: red;
		}
		a{
			color: red;
			/*margin-bottom: 5px;*/
			/*text-decoration: none;
			border-bottom: 1px solid red;*/
		}
	</style>

</head>
<body>
	<!-- 内联样式 -->
	<p style="color: blue; font-size: 20pt;">内联样式</p>

	<div>
		<h3>CSS 背景属性</h3>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%;">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td><ins>background</ins></td>
					<td style="color: black;">简写属性，作用是将背景属性设置在一个声明中。</td>
				</tr>
				<tr>
					<td><ins>background-attachment</ins></td>
					<td style="color: black;">背景图像是否固定或者随着页面的其余部分滚动。</td>
				</tr>
				<tr>
					<td><ins>background-color</ins></td>
					<td style="color: black;">设置元素的背景颜色。</td>
				</tr>
				<tr>
					<td><ins>background-image</ins></td>
					<td style="color: black;">把图像设置为背景</td>
				</tr>
				<tr>
					<td><ins>background-position</ins></td>
					<td style="color: black;">设置背景图像的起始位置。</td>
				</tr>
				<tr>
					<td><ins>background-repeat</ins></td>
					<td style="color: black;">设置背景图像是否及如何重复。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<h3>CSS 文本</h3>
		<b>CSS 文本属性可定义文本的外观。</b>
		<p>一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。</p>

		<table>
			<tbody>
				<tr>
					<th style="width: 30%;">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">color</a>
					</td>
					<td>设置文本颜色</td>
				</tr>
				<tr>
					<td>
						<a href="">direction</a>
					</td>
					<td>设置文本方向</td>
				</tr>
				<tr>
					<td><a href="">line-height</a></td>
					<td>设置行高</td>
				</tr>
				<tr>
					<td>
						<a href="">letter-spacing</a>
					</td>
					<td>设置字符间距。</td>
				</tr>
				<tr>
					<td>
						<a href="">text-align</a>
					</td>
					<td>对齐元素中的文本。</td>
				</tr>
				<tr>
					<td>
						<a href="">text-decoration</a>
					</td>
					<td>向文本添加修饰。</td>
				</tr>
				<tr>
					<td>
						<a href="">text-indent</a>
					</td>
					<td>缩进元素中文本的首行。</td>
				</tr>
				<tr>
					<td>
						<a href="" style="color: gray; text-decoration: none;">text-shadow</a>
					</td>
					<td>设置文本阴影。CSS2 包含该属性，但是 CSS2.1 没有保留该属性。</td>
				</tr>
				<tr>
					<td>
						<a href="">text-transform</a>
					</td>
					<td>控制元素中的字母。</td>
				</tr>
				<tr>
					<td>
						<a href="" style="color: gray; text-decoration: none;">unicode-bidi</a>
					</td>
					<td>设置文本方向。</td>
				</tr>
				<tr>
					<td>
						<a href="">white-space</a>
					</td>
					<td>设置元素中空白的处理方式。</td>
				</tr>
				<tr>
					<td>
						<a href="">word-spacing</a>
					</td>
					<td>设置字间距。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<h3>CSS 字体属性</h3>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">font</a>
					</td>
					<td>简写属性。作用是把所有针对字体的属性设置在一个声明中。</td>
				</tr>
				<tr>
					<td>
						<a href="">font-family</a>
					</td>
					<td>设置字体系列。</td>
				</tr>
				<tr>
					<td>
						<a href="">font-size</a>
					</td>
					<td>设置字体的尺寸。</td>
				</tr>
				<tr>
					<td>
						<a href="">font-size-adjust</a>
					</td>
					<td>当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）</td>
				</tr>
				<tr>
					<td>
						<a href="">font-stretch</a>
					</td>
					<td>对字体进行水平拉伸。（CSS2.1 已删除该属性。）</td>
				</tr>
				<tr>
					<td>
						<a href="">font-style</a>
					</td>
					<td>设置字体风格。</td>
				</tr>
				<tr>
					<td>
						<a href="">font-variant</a>
					</td>
					<td>以小型大写字体或者正常字体显示文本。</td>
				</tr>
				<tr>
					<td>
						<a href="">font-weight</a>
					</td>
					<td>设置字体的粗细。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<h3>CSS 列表属性（list）</h3>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%;">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">list-style</a>
					</td>
					<td>简写属性。用于把所有用于列表的属性设置于一个声明中。</td>
				</tr>
				<tr>
					<td>
						<a href="">list-style-image</a>
					</td>
					<td>将图像设置为列表项标志。</td>
				</tr>
				<tr>
					<td>
						<a href="">list-style-position</a>
					</td>
					<td>设置列表中列表标志的位置。</td>
				</tr>
				<tr>
					<td>
						<a href="">list-style-type</a>
					</td>
					<td>设置列表标志的类型。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<h3>CSS Table属性</h3>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">border-collapse</a>
					</td>
					<td>设置是否把表格边框合并为单一的边框。</td>
				</tr>
				<tr>
					<td>
						<a href="">border-spacing</a>
					</td>
					<td>设置分隔单元格边框的距离。</td>
				</tr>
				<tr>
					<td>
						<a href="">caption-side</a>
					</td>
					<td>设置表格标题的位置。</td>
				</tr>
				<tr>
					<td>
						<a href="">empty-cells</a>
					</td>
					<td>设置是否显示表格中的空单元格。</td>
				</tr>
				<tr>
					<td>
						<a href="">table-layout</a>
					</td>
					<td>设置显示单元、行和列的算法。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<h3>CSS 边框属性</h3>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">outline</a>
					</td>
					<td>在一个声明中设置所有的轮廓属性。</td>
				</tr>
				<tr>
					<td>
						<a href="">outline-color</a>
					</td>
					<td>设置轮廓的颜色。</td>
				</tr>
				<tr>
					<td>
						<a href="">outline-style</a>
					</td>
					<td>设置轮廓的样式。</td>
				</tr>
				<tr>
					<td>
						<a href="">outline-width</a>
					</td>
					<td>设置轮廓的宽度。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<h3>CSS 内边距属性</h3>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">padding</a>
					</td>
					<td>简写属性。作用是在一个声明中设置元素的内边距属性。</td>
				</tr>
				<tr>
					<td>
						<a href="">padding-bottom</a>
					</td>
					<td>设置元素的下内边距。</td>
				</tr>
				<tr>
					<td>
						<a href="">padding-left</a>
					</td>
					<td>设置元素的左内边距。</td>
				</tr>
				<tr>
					<td>
						<a href="">pading-right</a>
					</td>
					<td>设置元素的右内边距。</td>
				</tr>
				<tr>
					<td>
						<a href="">padding-top</a>
					</td>
					<td>设置元素的上内边距。</td>
				</tr>
			</tbody>
		</table>
	</div>

	<div>
		<p class="relative"><strong>相对定位：</strong><br/><span>&nbsp;&nbsp;设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。</span></p>

		<p class="relative"><strong>绝对定位：</strong><br/><span>&nbsp;&nbsp;设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。</span></p>

		<p class="relative"><strong>CSS 浮动</strong><br /><span>&nbsp;&nbsp;浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。<br />&nbsp;&nbsp;由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。</span></p>

		<hr />

		<h3>CSS 伪元素</h3>

		<b>:first-line 伪元素</b>
		<br>
		<span>&quot;first-line&quot; 伪元素用于向文本的首行设置特殊样式。</span>
		<br>
		<b>:first-letter 伪元素</b>
		<br>
		<span>&quot;first-letter&quot; 伪元素用于向文本的首字母设置特殊样式；</span>
		<br>
		<b>:before 伪元素</b>
		<br>
		<span>&quot;:before&quot; 伪元素可以在元素的内容前面插入新内容。</span>
		<br>
		<b>:after 伪元素</b>
		<br>
		<span>&quot;:after&quot; 伪元素可以在元素的内容之后插入新内容。</span>

	</div>
	<hr>
	<div>
		<h3>CSS 尺寸属性</h3>
		<p>CSS 尺寸属性允许你控制元素的高度和宽度。同样，还允许你增加行间距。</p>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">height</a>
					</td>
					<td>设置元素的高度。</td>
				</tr>
				<tr>
					<td>
						<a href="">line-height</a>
					</td>
					<td>设置行高。</td>
				</tr>
				<tr>
					<td>
						<a href="">max-height</a>
					</td>
					<td>设置元素的最大高度。</td>
				</tr>
				<tr>
					<td>
						<a href="">max-width</a>
					</td>
					<td>设置元素的最大宽度。</td>
				</tr>
				<tr>
					<td>
						<a href="">min-height</a>
					</td>
					<td>设置元素的最小高度。</td>
				</tr>
				<tr>
					<td>
						<a href="">min-width</a>
					</td>
					<td>设置元素的最小宽度。</td>
				</tr>
				<tr>
					<td>
						<a href="">width</a>
					</td>
					<td>设置元素的宽度。</td>
				</tr>
			</tbody>
		</table>
	</div>
	<hr>
	<div>
		<h3>CSS 分类属性</h3>
		<p>CSS 分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。</p>
		<table>
			<tbody>
				<tr>
					<th style="width: 30%">属性</th>
					<th>描述</th>
				</tr>
				<tr>
					<td>
						<a href="">clear</a>
					</td>
					<td>设置一个元素的侧面是否允许其他的浮动元素。</td>
				</tr>
				<tr>
					<td>
						<a href="">cursor</a>
					</td>
					<td>规定当指向某元素之上时显示的指针类型。</td>
				</tr>
				<tr>
					<td>
						<a href="">display</a>
					</td>
					<td>设置是否及如何显示元素。</td>
				</tr>
				<tr>
					<td>
						<a href="">float</a>
					</td>
					<td>定义元素在哪个方向浮动。</td>
				</tr>
				<tr>
					<td>
						<a href="">position</a>
					</td>
					<td>把元素放置到一个静态的、相对的、绝对的、或固定的位置中。</td>
				</tr>
				<tr>
					<td>
						<a href="">visibility</a>
					</td>
					<td>设置元素是否可见或不可见。</td>
				</tr>
			</tbody>
		</table>
	</div>

</body>
</html>